import React, { useState, useEffect } from 'react'
import { connect } from 'dva'
import { Col, Form, Input, Button, Card, Select, Table, DatePicker } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { fetchGoodsList } from '@/services/dataCenter/financeData'
import { formLayout } from '@/utils/utils'
import SearchBox from '@/components/SearchBox'
import RenderButtom from '@/components/RenderButton'
import moment from 'moment'
const {RangePicker} = DatePicker

const GoodsStatistics = props => {
  const { form, payTypes, platForms } = props
  const { getFieldDecorator } = form
  const [goodsList, setGoodsList] = useState([])
  const [total, setTotalPage] = useState(0)
  const [param, setParam] = useState({pageNo: 1, pageSize: 10,})
  const [dateFormat, setDateFormat] = useState('YYYY-MM-DD HH:mm:ss')

  // 按钮处理
  const handleBtn = type => {
    switch (type) {
      case 97:
        // 导出Excel
        break;
      default:
        break;
    }
  }
  useEffect(() => {
    _fetchGoodsList()
  }, [])
  const _fetchGoodsList = async (param) => {
    const res = await fetchGoodsList(param)
    if (res.code == 0) {
      setGoodsList(res.data)
    }
  }
  const pagination = {
    total: parseInt(total),
    onChange (page) {
      _fetchGoodsList({
        ...param,
        pageNo: page,
      })
    }
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log(values)
      init({
        ...param,
        startTime: values.selectedTime ? values.selectedTime[0].format(dateFormat) : null,
        endTime: values.selectedTime ? values.selectedTime[1].format(dateFormat) : null,
      })
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (v, r, i) => {
        return (<span>{i+1}</span>)
      }
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
    },
    {
      title: '曝光次数',
      dataIndex: 'exposureCount',
      key: 'exposureCount',
    },
    {
      title: '曝光人数',
      dataIndex: 'exposurePersonCount',
      key: 'exposurePersonCount',
    },
    {
      title: '分销次数',
      dataIndex: 'distributionCount',
      key: 'distributionCount',
    },
    {
      title: '分销人数',
      dataIndex: 'distributionPersonCount',
      key: 'distributionPersonCount',
    },
    {
      title: '加购件数',
      dataIndex: 'addCarCount',
      key: 'addCarCount',
    },
    {
      title: '加购人数',
      dataIndex: 'addCarPersonCount',
      key: 'addCarPersonCount',
    },
    {
      title: '付款件数',
      dataIndex: 'payCount',
      key: 'payCount',
    },
    {
      title: '付款人数',
      dataIndex: 'payPersonCount',
      key: 'payPersonCount',
    },
    {
      title: '商品转化率',
      dataIndex: 'conversionRate',
      key: 'conversionRate',
      render: (v, r, i) => {
        return (<span>{(v*100).toFixed(2) + '%'}</span>)
      }
    }
  ]
  const getFields = () => {
    return(<>
      <Col span={8}>
        <Form.Item label="商品名称" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('goodsName', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label={`筛选时间`} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator(`selectedTime`, {
            defaultValue: [moment(), moment()],
          })
            (<RangePicker format={dateFormat} showTime />)}
        </Form.Item>
      </Col>
    </>
  )}
  return (<PageHeaderWrapper>
    <Card>
      <Form layout={formLayout}>
        <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      </Form>
    </Card>
    <Card style={{marginTop: '10px'}} title="单品转化率=付款件数/曝光次数">
      <RenderButtom click={handleBtn} />
      <Table rowKey={record => record.id} pagination={pagination} size="small" columns={columns} dataSource={goodsList}/>
    </Card>
  </PageHeaderWrapper>)
}

export default Form.create()(GoodsStatistics)


